<template>
  <div>
    <!-- :data="{ schemeId: this.selectedSchemeId }" -->
    <!-- v-bind="$attrs" -->
    <el-upload
      ref="commonUpload"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-preview="handlePreview"
      :before-remove="beforeRemove"
      :fileList="fileList"
      :list-type="checkListType"
      :accept="accept"
      :limit="limit"
      :action="action"
    >
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
      <div>
        <slot name="tip" class="el-upload__tip"></slot>
      </div>
    </el-upload>
  </div>
</template>

<script>
import utils from "@/utils";

export default {
  props: {
    value: {
      required: true,
    },
    listType: {
      type: String,
      default: () => "picture",
    },
    limit: {
      type: Number,
      default: () => 1,
    },
    accept: {
      type: String,
      default: () => ".png,.jpg",
    },
    action: {
      type: String,
      default: () => "nongmao/nb-as/1.0.1/FileService/uploadFile",
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  computed: {
    checkListType() {
      if(this.accept.indexOf('.mp4') > -1){
        return 'text' 
      }else{
        return this.listType
      }
    }
  },
  methods: {
    init() {
      this.clearFiles();

      if (this.limit > 1) {
        // 多图
        this.fileList = []
        this.value.map((item) => {
          this.fileList.push({
            name:item,
            url: `/nongmao/nb-as/1.0.1/FileService/previewFile?fileId=${item}`,
          });
        });
      } else {
        // 单图
        if (this.value) {
          this.fileList = [
            {
              url: `/nongmao/nb-as/1.0.1/FileService/previewFile?fileId=${this.value}`,
              name:this.value
            },
          ];
        } else {
          this.fileList = [];
        }
      }
    },
    handleChange(file) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 20MB!");
        this.clearFiles();
        return false;
      }
      const types = this.accept.split(",");

      let postion = file.name.lastIndexOf(".");
      let prefix = file.name.substr(postion, file.name.length);

      if (!types.includes(prefix)) {
        this.$message.error(`上传文件格式必须是${types.join(",")}`);
        this.clearFiles();
        return false;
      }
    },
    handleSuccess(res, file, fileList) {
      if (res.success) {
        this.$message({
          type: "success",
          message: "上传成功",
        });

        // console.log('res');
        // console.log(res.returnObj);
        // console.log('file');
        // console.log(file);
        // console.log('fileList');
        // console.log(fileList);

        if (this.limit > 1) {
          let temp = [];
          fileList.map((item) => {
            temp.push(item.response.returnObj);
          });
          this.$emit("input", temp);
          this.$emit("uploadDone", temp);
        } else {
          this.$emit("input", res.returnObj);
          this.$emit("uploadDone", res.returnObj);
        }
      } else {
        this.$message({
          duration: 5000,
          type: "error",
          message: res.prompt || "上传失败",
        });
        this.clearFiles();
      }
    },
    handlePreview(file){
      if(file.name.indexOf('.mp4') > -1){
        this.$alert(`
          <video src="${file.url}" width="100%" controls></video>
        `, '预览', {
          dangerouslyUseHTMLString: true
        });
      }
    },
    beforeRemove(file, fileList) {
      this.fileList = [];
      this.$emit("input", "");
    },
    clearFiles() {
      if (this.$refs.commonUpload) this.$refs.commonUpload.clearFiles();
    },
  },
};
</script>

<style lang="scss" scoped></style>
